/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState, useEffect } from 'react';
import { ModalForm } from '@ant-design/pro-form';
import { transfer } from '@/services/admin/menu/index';
import { getDepartments, getAllUsers } from '@/services/admin/editMenu';
import { Row, Col, message, TreeSelect } from 'antd';

interface UserInfo {
  id: string;
  name: string;
}
const Role: React.FC<any> = ({ params: { managerInfo, isManager }, updateManager }) => {
  const [userInfo, setUserInfo] = useState<UserInfo>({ id: '', name: '' });
  const [visible, setVisible] = useState(false);
  const [departmentList, setDepartmentList] = useState([]);
  const [allUsers, setAllUsers] = useState<any[]>([]);

  const onSubmit = async () => {
    if (!userInfo.id) {
      message.error('请选择转让人');
      return;
    }
    const { code, msg } = await transfer({ user_id: userInfo.id });
    if (code == 0) {
      setVisible(false);
      message.success(msg);
      updateManager({ name: userInfo.name });
    } else {
      message.error(msg);
    }
  };

  const getDepartmentList = async () => {
    const { data = [] } = await getDepartments({});
    const { data: AllUsers = [] } = await getAllUsers({});
    setAllUsers(AllUsers);
    let list: any = [];
    const department = data.map((item: any) => {
      return Object.assign(
        {},
        {
          id: item.id,
          isLeaf: false,
          title: item.name,
          value: item.id + '999999',
          disabled: true,
        },
      );
    });
    AllUsers.forEach((item: any) => {
      item.department_list.forEach((item1: any) => {
        list = department.filter((item2: any) => {
          if (item2.id == item1.id) {
            const { children = [] } = item2;
            item2.children = [
              ...children,
              {
                isLeaf: true,
                title: item.name,
                value: item.name,
                department_list: item.department_list,
              },
            ];
          }
          return item2;
        });
      });
    });
    setDepartmentList(list);
  };

  const handelChange = (_: string, name: string) => {
    const authDetailUser = allUsers
      .filter((item: any) => item.name == name)
      .map((item2: any) => ({ id: item2.id, name: item2.name }))[0];
    setUserInfo(authDetailUser);
  };

  useEffect(() => {
    getDepartmentList();
  }, []);

  return (
    <>
      <Row style={{ padding: '20px 20px 0 20px' }}>
        <Col style={{ marginRight: 5 }}>管理员:</Col>
        <Col>
          {managerInfo.name} {managerInfo.mobile}
        </Col>
        {isManager ? (
          <Col offset={1}>
            <a onClick={() => setVisible(true)}>管理员转让</a>
          </Col>
        ) : null}
      </Row>
      <ModalForm
        title='管理权转让'
        visible={visible}
        onVisibleChange={setVisible}
        width={700}
        modalProps={{
          centered: true,
        }}
        onFinish={onSubmit}
        layout='inline'
      >
        <TreeSelect
          showSearch={true}
          treeData={departmentList}
          autoClearSearchValue={false}
          allowClear={true}
          placeholder='请选择转让人'
          style={{ width: 500 }}
          showCheckedStrategy='SHOW_CHILD'
          dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
          onChange={handelChange}
        />
      </ModalForm>
    </>
  );
};

export default Role;
